<template>
  <el-row>
    <div>
      <div class="title">客户跟进情况数据看板</div>
      <el-table style="width: 100%" :data="agentList" :border="true" :cell-style="{
		'text-align': 'center',
    }" :header-cell-style="{'background-color':'#E6E6FA50','text-align':'center'}">
        <el-table-column prop="title" width="120px" label="">
        </el-table-column>
        <el-table-column v-for="(item,index) in allFieldList"
                         :prop="item.key"
                         :key="index"
                         :label="item.name">
          <template slot-scope="scope">
            <span :style="{color:scope.$index==1?'red':''}">{{ scope.row[item.key]}}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div>
      <div class="section-header">
        <div class="title">客户行为数据看板</div>
        <div>
          <el-select v-model="section2Form.section2Type" @change="sectionChange2(1)">
            <el-option v-for="(item, index) in timeTypeList" :label="item.label" :value="item.value" :key="index"></el-option>
          </el-select>
          <el-date-picker
            v-model="section2Form.section2CreateDate"
            :picker-options="pickerBeginDateBefore"
            @change="sectionChange2(2)"
            type="daterange"
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </div>
      </div>
      <div class="item-list">
        <div>
          <div>访客数</div>
          <div class="count">{{customerData.visitUserCount}}</div>
        </div>
        <div>
          <div>岗位浏览数</div>
          <div class="count">{{customerData.positionVisitUserCount}}</div>
        </div>
        <div>
          <div>报名人数</div>
          <div class="count">{{customerData.singUpUserCount}}</div>
        </div>
        <div>
          <div>拨打电话人数</div>
          <div class="count">{{customerData.callMobileUserCount}}</div>
        </div>
        <div>
          <div>加微信人数</div>
          <div class="count">{{customerData.addWxUserCount}}</div>
        </div>
        <div>
          <div>预约成功人数</div>
          <div class="count">{{customerData.appointmentUserCount}}</div>
        </div>
        <div>
          <div>安排面试人数</div>
          <div class="count">{{customerData.interviewUserCount}}</div>
        </div>
        <div>
          <div>入职成功人数</div>
          <div class="count">{{customerData.entryUserCount}}</div>
        </div>
      </div>
    </div>
    <div>
      <div class="section-header">
        <div class="title">经纪人行为数据看板</div>
        <div>
          <el-select v-model="section3Form.section3Type" @change="sectionChange3(1)">
            <el-option v-for="(item, index) in timeTypeList" :label="item.label" :value="item.value" :key="index"></el-option>
          </el-select>
          <el-date-picker
            v-model="section3Form.section3CreateDate"
            @change="sectionChange3(2)"
            :picker-options="pickerBeginDateBefore"
            type="daterange"
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </div>
      </div>
      <div class="item-list">
        <div>
          <div>登录总人数</div>
          <div class="count">{{agentConfig.loginCount}}</div>
        </div>
        <div>
          <div>分享总人数</div>
          <div class="count">{{agentConfig.shareCount}}</div>
        </div>
        <div>
          <div>分享获客总人数</div>
          <div class="count">{{agentConfig.shareSuccessCount}}</div>
        </div>
      </div>
      <div class="tab3-list">
        <div :class="section3Form.actionType==0?'select':''" @click.stop="actionTypeChange(0)">登录次数</div>
        <div :class="section3Form.actionType==1?'select':''" @click.stop="actionTypeChange(1)">分享次数</div>
        <div :class="section3Form.actionType==2?'select':''" @click.stop="actionTypeChange(2)">分享获客次数</div>
      </div>
      <div>
        <el-table style="width: 100%;margin-bottom: 10px" :data="agentList3" :border="true" :cell-style="{
		'text-align': 'center',
    }" :header-cell-style="{'background-color':'#E6E6FA50','text-align':'center'}">
          <el-table-column prop="title" width="120px" label="日期">
          </el-table-column>
          <el-table-column v-for="(item,index) in allFieldList3"
                           :prop="item.key"
                           :key="index"
                           :label="item.name">
            <template slot-scope="scope">
              <span :style="{color:scope.row[item.key]==0?'red':''}">{{ scope.row[item.key]}}</span>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="page.currentPage"
          :page-size="page.pageSize"
          layout="prev, pager, next, jumper"
          :total="page.total">
        </el-pagination>
      </div>
    </div>
  </el-row>
</template>

<script>
  export default {
    name: 'index',
    data () {
      return {
        section2Form: {
          section2Type: 0,
          section2CreateDate: '',
          startTime: '',
          endTime: ''
        },
        section3Form: {
          section3Type: 0,
          section3CreateDate: '',
          startTime: '',
          endTime: '',
          actionType: 0
        },
        customerData: {},
        columns: ['客户总数', '未跟进客户总数'],
        agentList: [],
        allFieldList: [],
        timeTypeList: [
          {
            label: '昨天',
            value: 0
          },
          {
            label: '今天',
            value: 1
          },
          {
            label: '本周',
            value: 2
          },
          {
            label: '本月',
            value: 3
          },
          {
            label: '3个月内',
            value: 4
          }
        ],
        agentList3: [],
        allFieldList3: [],
        page: {
          total: 0, // 总页数
          currentPage: 1, // 当前页数
          pageSize: 10 // 每页显示多少条
        },
        agentConfig: {},
        pickerBeginDateBefore: {
          disabledDate(time) {
            return time.getTime() > Date.now()
          }
        }
      }
    },
    mounted () {
      this.getAgentList()
      this.customerList()
      this.getAgentBehaviorList()
    },
    methods: {
      // 经纪人跟进统计
      getAgentList () {
        this.$http({
          url: this.$http.adornUrl('/statistics/agent/list'),
          method: 'get',
          data: this.$http.adornData({})
        }).then(({ data }) => {
           for(var i = 0; i < this.columns.length; i++) {
             let title = this.columns[i]
             var a = {}
             var b = []
             a['title'] = title
             var x = 0
             data.forEach((item) => {
               x+=1
               b.push({name:item.name, key:'num'+x})
               a['num'+x] = title=='客户总数'?item.userTotalCount:item.noFollowUpUserCount
             })
             this.agentList.push(a)
             this.allFieldList = b
           }
        })
      },
      // 客户行为统计
      customerList () {
        if (this.section2Form.section2CreateDate&&this.section2Form.section2CreateDate.length > 0) {
          this.section2Form.startTime = this.section2Form.section2CreateDate[0]
          this.section2Form.endTime = this.section2Form.section2CreateDate[1]
        }
        else {
          this.section2Form.startTime = ''
          this.section2Form.endTime = ''
        }
        this.$http({
          url: this.$http.adornUrl('/statistics/user/action/data'),
          method: 'get',
          params: this.$http.adornParams({
            type: this.section2Form.section2Type,
            startTime: this.section2Form.startTime,
            endTime: this.section2Form.endTime
          })
        }).then(({ data }) => {
          this.customerData = data
        })
      },

      sectionChange2 (type) {
        if (type == 1) {
          this.section2Form.section2CreateDate = ''
        }
        else {
          this.section2Form.section2Type = ''
        }
        this.customerList()
      },

      // 经纪人行为
      sectionChange3 (type) {
        if (type == 1) {
          this.section3Form.section3CreateDate = ''
        }
        else {
          this.section3Form.section3Type = ''
        }
        this.getAgentBehaviorList()
      },

      actionTypeChange (type) {
        this.section3Form.actionType = type
        this.getAgentBehaviorList()
      },

      // 经纪人行为数据
      getAgentBehaviorList () {
        console.log(this.section3Form.section3CreateDate)
        if (this.section3Form.section3CreateDate&&this.section3Form.section3CreateDate.length > 0) {
          this.section3Form.startTime = this.section3Form.section3CreateDate[0]
          this.section3Form.endTime = this.section3Form.section3CreateDate[1]
        }
        else {
          this.section3Form.startTime = ''
          this.section3Form.endTime = ''
        }
        this.$http({
          url: this.$http.adornUrl('/statistics/agent/action/data'),
          method: 'get',
          params: this.$http.adornParams({
            type: this.section3Form.section3Type,
            startTime: this.section3Form.startTime,
            endTime: this.section3Form.endTime,
            actionType: this.section3Form.actionType,
            pageNo: this.page.currentPage,
            pageSize: this.page.pageSize
          })
        }).then(({ data }) => {
          this.agentList3 = []
          this.allFieldList3 = []
          this.agentConfig = data
          this.page.total = data.page.conutNote
          let column = data.page.list
          for(var i = 0; i < column.length; i++) {
            let title = column[i].day
            let list = column[i].agentActionDataList
            var a = {}
            var b = []
            a['title'] = title
            var x = 0
            list.forEach((item) => {
              x+=1
              b.push({name:item.name, key:'num'+x})
              a['num'+x] = item.count
            })
            this.agentList3.push(a)
            this.allFieldList3 = b
          }
        })
      },
      handleSizeChange (val) {
        this.page.pageSize = val
        this.getAgentBehaviorList()
      },
      handleCurrentChange (val) {
        this.page.currentPage = val
        this.getAgentBehaviorList()
      }
    }
  }
</script>

<style scoped lang="scss">
  .title{
    color: black;
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 15px;
  }
  .section-header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 50px;
  }
  .item-list{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-top: 20px;
  }
  .item-list>div{
    border-right: solid 1px #DADADA;
    padding-left: 12px;
    padding-right: 12px;
  }
  .count{
    font-size: 24px;
    font-weight: 400;
    color: black;
    margin-top: 8px;
  }

  .tab3-list{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    div{
      height: 40px;
      line-height: 40px;
      margin-right: 30px;
    }
  }

  .select{
    border-bottom: solid 1px #1e9fff;
    color: #1e9fff;
  }
</style>
